<template>
  <div style="padding: 20px; background-color: #fff5ee; border-radius: 8px; margin: 20px 0;">
    <h2>defineProps 示例</h2>
    
    <!-- 显示通过props传递的数据 -->
    <p>标题: {{ title }}</p>
    <p>描述: {{ description }}</p>
    <p>数量: {{ quantity }}</p>
    <p>是否可见: {{ isVisible ? '是' : '否' }}</p>
    
    <!-- 使用计算属性 -->
    <p>状态文本: {{ statusText }}</p>
  </div>
</template>

<script setup>
// 定义props
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: '暂无描述'
  },
  quantity: {
    type: Number,
    default: 0
  },
  isVisible: {
    type: Boolean,
    default: true
  }
})

// 可以像使用普通变量一样使用props
import { computed } from 'vue'
const statusText = computed(() => {
  return props.isVisible ? '组件可见' : '组件隐藏'
})
</script>